<template>
	<div ref="dom" class="charts chart-map"></div>
</template>

<script>
import * as echarts from 'echarts'
import  '../../js/china'; // 引入组件
import tdTheme from './theme.json';
import { on, off } from '@/libs/tools';
// echarts.registerTheme('tdTheme', tdTheme);

export default {
	name: 'ChartMap',
	props: {
		value: Array,
		max: Number,
		title: Object,
		subtext: String,
		legend: Object,
		series: Array,
		maptype: String,
		geoCoordMap: Object
	},
	watch: {
		value: {
			deep: true,
			handler(val) {
				this.intChart();
			}
		}
	},
	data() {
		return {
			dom: null
		};
	},
	methods: {
		resize() {
			this.dom.resize();
		},
		intChart() {
			let that = this;

			this.$nextTick(() => {
				var geoCoordMap = this.geoCoordMap;

				var convertData = function(data) {
					var res = [];
					if (data) {
						for (var i = 0; i < data.length; i++) {
							var geoCoord = geoCoordMap[data[i].name]; // 首先根据data中的name作为键值读入地理坐标
							// var rjj1 = data[i].value;
							if (geoCoord) {
								res.push({
									name: data[i].name,
									value: geoCoord.concat(data[i].value) // 随后将地理坐标与对应信息值衔接起来
									// 成为了 [name 经度 纬度 value]的形式
								});
							}
						}
					}
					// console.log(res)
					return res;
				};

				var geo = {
					type: 'map',
					map: this.maptype,
					symbolSize: 12,
					label: {
						normal: {
							show: false
						},
						emphasis: {
							show: false
						}
					},
					itemStyle: {
						normal: {
							areaColor: 'rgba(255,255,255,0)'
						},
						emphasis: {
							areaColor: 'rgba(255,255,255,0)'
						}
					}
				};

				let option = {
					visualMap: {
						// 图列显示柱
						type: 'continuous',
						right: '40',
						bottom: '50',
						text: ['高', '低'],
						max: this.max,
						min: 0,
						seriesIndex: 0,
						realtime: false,
						calculable: false,
						textStyle: {
							color: '#fff'
						}
					},
					geo: geo,
					series: [
						{
							type: 'map',
							map: this.maptype,
							symbolSize: 12,
							label: {
								normal: {
									show: false,
									textStyle: {
										color: '#fff',
										fontSize: 12
									}
								},
								emphasis: {
									show: false,
									textStyle: {
										color: '#fff',
										fontSize: 16
									}
								}
							},
							itemStyle: {
								normal: {
									// areaColor: "rgba(255,255,255,0)",
									borderColor: 'rgba(255,255,255,0.6)',
									borderWidth: 1,
									shadowColor: 'rgba(68, 211, 240, 1)',
									shadowBlur: 0
								},
								emphasis: {
									areaColor: 'rgba(255,255,255,0)'
								}
							},
							data: this.value
						},
						{
							type: 'effectScatter',
							coordinateSystem: 'geo',
							symbolSize: function(val) {
								return val[2] / (that.max * 0.024);
							},
							showEffectOn: 'render',
							rippleEffect: {
								brushType: 'stroke'
							},
							label: {
								normal: {
									show: true,
									formatter: '{b}',
									textStyle: {
										color: '#fff',
										fontSize: 14
									}
								}
							},
							itemStyle: {
								normal: {
									color: 'rgba(12,23,60,0.7)'
								}
							},
							zlevel: 6,
							data: convertData(this.value)
						}
					]
				};

				if (this.value) {
					this.dom = echarts.init(this.$refs.dom, 'tdTheme');
					this.dom.setOption(option);
					this.dom.on('click', function(params) {
						var data = {
							id: 'mapTag',
							value: params.name
						};
						that.$emit('updatecharts', data);
					});
				}
				on(window, 'resize', this.resize);
			});
		}
	},
	mounted() {
		this.intChart();
	},
	beforeDestroy() {
		off(window, 'resize', this.resize);
	}
};
</script>
